/**
 * 使用AJAX加载links.html内容并插入到页面中
 * 增强版：包含详细的错误处理和调试信息
 */

document.addEventListener('DOMContentLoaded', function() {
  const container = document.querySelector('.iframe-container');
  
  // 显示加载状态
  container.innerHTML = '<div class="loading-spinner">加载中...</div>';
  
  // 开始加载内容
  loadLinksContent().catch(error => {
    console.error('加载内容失败:', error);
    showErrorFallback();
  });
});

async function loadLinksContent() {
  const container = document.querySelector('.iframe-container');
  const linksPath = 'links.html'; // 确保路径正确
  
  try {
    // 添加请求超时处理
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), 5000);
    
    const response = await fetch(linksPath, {
      signal: controller.signal
    });
    
    clearTimeout(timeoutId);
    
    if (!response.ok) {
      throw new Error(`HTTP错误! 状态码: ${response.status}`);
    }
    
    const html = await response.text();
    
    // 验证内容是否有效
    if (!html.includes('wrapper')) {
      throw new Error('返回内容格式不正确');
    }
    
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, 'text/html');
    
    // 创建内容容器
    const contentDiv = document.createElement('div');
    contentDiv.className = 'links-content';
    
    // 从links.html中提取内容
    const wrapper = doc.querySelector('.wrapper');
    if (!wrapper) {
      throw new Error('找不到内容容器');
    }
    
    const linksContent = wrapper.cloneNode(true);
    contentDiv.appendChild(linksContent);
    
    // 替换容器内容
    container.innerHTML = '';
    container.appendChild(contentDiv);
    
    // 添加样式处理
    addLinksStyles();
    
    // 触发自定义事件通知加载完成
    document.dispatchEvent(new CustomEvent('linksLoaded', {
      detail: { success: true }
    }));
    
  } catch (error) {
    console.error('加载链接内容失败:', error);
    
    // 尝试备用方案
    try {
      await tryFallbackMethod();
    } catch (fallbackError) {
      console.error('备用方案也失败:', fallbackError);
      throw fallbackError; // 重新抛出错误
    }
  }
}

// 备用加载方案
async function tryFallbackMethod() {
  // 可以尝试其他方法，如JSONP、服务器代理等
  throw new Error('备用方案未实现');
}

// 添加links.html需要的样式
function addLinksStyles() {
  // 检查是否已存在样式
  if (document.getElementById('links-styles')) return;
  
  const style = document.createElement('style');
  style.id = 'links-styles';
  style.textContent = `
    .links-content {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 1rem;
      animation: fadeIn 0.5s ease;
    }
    
    .links-content .demo {
      background-color: var(--card-bg);
      border-radius: 8px;
      padding: 1.2rem;
      margin-bottom: 1.5rem;
    }
    
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
  `;
  document.head.appendChild(style);
}

// 错误回退方案
function showErrorFallback() {
  const container = document.querySelector('.iframe-container');
  container.innerHTML = `
    <div class="error-message">
      <p>无法加载链接内容</p>
      <p>可能原因：网络问题或服务器错误</p>
      <a href="links.html" class="error-link">点击这里直接访问链接页面</a>
      <button onclick="window.location.reload()" class="reload-button">重试</button>
    </div>
  `;
  
  // 添加重试按钮样式
  const style = document.createElement('style');
  style.textContent = `
    .reload-button {
      display: block;
      margin: 1rem auto;
      padding: 0.5rem 1rem;
      background-color: var(--primary-color);
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
  `;
  document.head.appendChild(style);
}

// 导出函数供调试使用
window.debugLinksLoader = {
  reload: loadLinksContent,
  showError: showErrorFallback
};